<template>
  <div class="empty">
    <img src="@/UI/assets/projectEmpty.svg" alt="empty" />
    <Button type="primary" class="create" @click="active = !active">
      + 新建项目
    </Button>
  </div>
  <CreateProjectModal
    :active="active"
    @changeActive="changeActive"
    @refresh="$emit('refresh')"
  />
</template>
<script setup lang="ts">
import { Button } from "cax-ui";
import { ref, defineEmits } from "vue";
import CreateProjectModal from "@/UI/components/projects/createProjectModal.vue";
let active = ref(false);
function changeActive(value: boolean) {
  active.value = value;
}
const emits = defineEmits(["refresh"]);
</script>
<style lang="less" scoped>
.empty {
  height: 100vh;
  background-color: #f1f2f4;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  img {
    width: 288px;
    height: 294px;
  }
  .create {
    margin-top: 32px;
  }
}
</style>
